<template>

    <div class="chart" id="Two" :style="{ width: '650px', height: '450px' }">
    </div>

</template>
<script lang="ts" setup>
import * as echarts from "echarts";
import { onMounted } from "vue";

onMounted(() => {
    // 基于准备好的dom，初始化echarts实例
    const myChart = echarts.init(document.getElementById("Two") as HTMLDivElement);

    // 绘制图表
    const colors = ['#5470C6', '#91CC75', '#EE6666'];
    myChart.setOption({
        backgroundColor: '#2c343c',
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                crossStyle: {
                    color: '#999'
                }
            }
        },
        toolbox: {
            feature: {
                dataView: { show: true, readOnly: false },
                magicType: { show: true, type: ['line', 'bar'] },
                restore: { show: true },
                saveAsImage: { show: true }
            }
        },
        legend: {
            data: ['男', '女', '藏品总量']
        },
        xAxis: [
            {
                type: 'category',
                name: '用户年龄',
                data: ['16-20', '21-25', '26-30', '31-35', '36-40', '41-45', '46-50'],
                axisPointer: {
                    type: 'shadow'
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                name: '用户数量',
                min: 0,
                max: 50,
                interval: 10,
                axisLabel: {
                    formatter: '{value} w'
                }
            },
            {
                type: 'value',
                name: '藏品总量',
                min: 0,
                max: 250,
                interval: 50,
                axisLabel: {
                    formatter: '{value} w'
                }
            }
        ],
        series: [
            {
                name: '男',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value: number) {
                        return value as number + ' w';
                    }
                },
                data: [
                    22.0, 44.9, 47.0, 23.2, 12.7, 5.6, 1.6
                ]
            },
            {
                name: '女',
                type: 'bar',
                tooltip: {
                    valueFormatter: function (value: number) {
                        return value as number + ' w';
                    }
                },
                data: [
                    12.6, 32.9, 36.4, 15.6, 5.7, 1.7, 0.5 
                ]
            },
            {
                name: '藏品总量',
                type: 'line',
                yAxisIndex: 1,
                tooltip: {
                    valueFormatter: function (value: any) {
                        return value as number + ' w';
                    }
                },
                data: [74.0, 212.2, 243.3, 154.5, 96.3, 45.2, 15.3]
            }
        ]
    })
})
</script>


<style>
.chart {
    /* 高度360 */
    height: 4.5rem;
    background-color: #fff;
}
</style>